<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html, body {
           padding: 0;
           margin: 0;
           height: 100%;
           width: 100%;
        }
        #home {
           padding: 20px
        }
        .form {
           margin-block-end: 0
        }
        .pagination {
           margin-top: 20px
        }
        h3 {
           margin-block-start: 0
        }
    </style>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div id="home">
  <h3>信息列表</h3>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="学生列表管理" name="student">
      <div class="filter">
        <el-form :inline="true" :model="params" class="form" size="mini">
          <el-form-item>
            <el-button type="danger" @click="deleteStudentList">批量删除</el-button>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="params.classId" placeholder="班级">
              <el-option v-for="item in classList" :label="item.classname" :value="item.classname"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="params.keywords" placeholder="请输入搜索关键词"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getStudentList(1)">查询</el-button>
            <el-button type="warning" @click="addStudent">新增学生信息</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
              :data="tableData"
              size="mini"
              height="500"
              @selection-change="selectStudent">
        style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="stuId"
                label="学号"
                align="center"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="stuName"
                label="姓名"
        >
        </el-table-column>
        <el-table-column
                prop="stuName"
                label="年龄"
        >
        </el-table-column>
        <el-table-column
                prop="classId"
                label="班级"
        >
        </el-table-column>
        <el-table-column
                label="操作"
                width="200"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                      size="mini"
                      type="default"
                      @click="handleEdit(scope.row)">编辑
              </el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pageNo"
                :page-sizes="pageSizes"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-count="pageTotal"
                :total="listTotal"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="教师列表管理" name="teacher">
      <div class="filter">
        <el-form :inline="true" :model="teacherParams" class="form" size="mini">
          <el-form-item>
            <el-button type="danger" @click="deleteTeacherList">批量删除</el-button>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="teacherParams.keywords" placeholder="请输入搜索关键词"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getTeacherList(1)">查询</el-button>
            <el-button type="warning" @click="addTeacher">新增老师信息</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
              :data="teacherTableData"
              @selection-change="selectTeacher"
              size="mini"
              height="500"
              style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="序号"
                align="center"
                width="100"
                type="index"
        >
        </el-table-column>
        <el-table-column
                prop="teacherName"
                label="姓名"
        >
        </el-table-column>
        <el-table-column
                prop="subjectName"
                label="学科"
        >
        </el-table-column>
        <el-table-column
                label="操作"
                width="200"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                      size="mini"
                      type="default"
                      @click="handleTeacherEdit(scope.row)">编辑
              </el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleTeacherDelete(scope.row)">删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
                @size-change="handleTeacherSizeChange"
                @current-change="handleTeacherCurrentChange"
                :current-page="teacherParams.pageNo"
                :page-sizes="teacherPageSizes"
                :page-size="teacherParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-count="teacherPageTotal"
                :total="teacherListTotal"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
  </el-tabs>

  <el-dialog
          size="mini"
          :title="modalTitle"
          :visible.sync="dialogVisible"
          width="500px"
          :before-close="handleClose">
    <el-form size="mini" :model="updateForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学号" prop="stuId"
                    :rules="{
                      required: true, message: '学号不能为空', trigger: 'blur'
                    }"
      >
        <el-input placeholder="请输入学号" v-model="updateForm.stuId"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="stuName"
                    :rules="{
                      required: true, message: '学生姓名不能为空', trigger: 'blur'
                    }"
      >
        <el-input placeholder="请输入学生姓名" v-model="updateForm.stuName"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input placeholder="请输入年龄" v-model="updateForm.age"></el-input>
      </el-form-item>
      <el-form-item label="初始密码" prop="password"
                    :rules="{
                      required: true, message: '密码不能为空', trigger: 'blur'
                    }"
      >
        <el-input placeholder="请输入密码" v-model="updateForm.password"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="classId"
                    :rules="{
                      required: true, message: '班级不能为空', trigger: 'blur'
                    }"
      >
        <el-select v-model="updateForm.classId" placeholder="请选择班级">
          <el-option v-for="item in classList" :label="item.classname" :value="item.classname"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleCancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleSave">确 定</el-button>
    </div>
    </span>
  </el-dialog>
  <el-dialog
          size="mini"
          :title="teacherModalTitle"
          :visible.sync="teacherDialogVisible"
          width="500px"
          :before-close="handleTeacherClose">
    <el-form size="mini" :model="teacherUpdateForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="teacherName"
                    :rules="{
                      required: true, message: '教师姓名不能为空', trigger: 'blur'
                    }"
      >
        <el-input placeholder="请输入姓名" v-model="teacherUpdateForm.teacherName"></el-input>
      </el-form-item>

      <el-form-item label="学科" prop="subjectName"
                    :rules="{
                      required: true, message: '学科不能为空', trigger: 'blur'
                    }"
      >
        <el-input placeholder="请输入学科" v-model="teacherUpdateForm.subjectName"></el-input>
      </el-form-item>

      <el-form-item label="初始密码" prop="password"
                    :rules="{
                      required: true, message: '密码不能为空', trigger: 'blur'
                    }"
      >
        <el-input placeholder="请输入密码" v-model="teacherUpdateForm.password"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleTeacherCancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleTeacherSave">确 定</el-button>
    </div>
    </span>
  </el-dialog>
</div>
<script>

  var app = new Vue({
    el: '#home',
    data() {
      return {
        params: {
          keywords: '',
          classId: '',
          season: '',
          pageNo: 1,
          pageSize: 5,
        },
        teacherParams: {
          keywords: '',
          pageNo: 1,
          pageSize: 5,
        },
        tableData: [],
        teacherTableData: [],
        classList: [],
        pageSizes: [5, 10, 20, 30, 50],
        teacherPageSizes: [5, 10, 20, 30, 50],
        pageTotal: 0,
        teacherPageTotal: 0,
        listTotal: 0,
        teacherListTotal: 0,
        dialogVisible: false,
        teacherDialogVisible: false,
        updateForm: {},
        teacherUpdateForm: {},
        modalTitle: '新增学生信息',
        teacherModalTitle: '新增教师信息',
        modalType: true,
        teacherModalType: true,
        activeName: 'student',
        selectStudentList: [],
        selectTeacherList: []
      };
    },
    methods: {
      // 编辑
      handleEdit(row) {
        this.modalTitle = row.stuName;
        this.dialogVisible = true;
        this.modalType = true;
        this.updateForm = JSON.parse(JSON.stringify(row));
      },
      handleTeacherEdit(row) {
        console.log('row', row);
        this.teacherModalTitle = row.teacherName;
        this.teacherDialogVisible = true;
        this.teacherModalType = true;
        this.teacherUpdateForm = JSON.parse(JSON.stringify(row));
      },

      async handleDelete(row) {
        try {
          const data = await axios.post('/admin/deleteStudent ', {
            id: row.id,
          });
          if (data) {
            this.$message({
              message: '删除成功',
              type: 'success',
            });
            await this.getStudentList(this.params.pageNo);
          }
        } catch (err) {
          this.$message({
            message: '删除失败',
            type: 'error',
          });
        }
      },
      async handleTeacherDelete(row) {
        try {
          const data = await axios.post('/admin/deleteTeacher ', {
            id: row.id,
          });
          if (data) {
            this.$message({
              message: '删除成功',
              type: 'success',
            });
            await this.getTeacherList(this.teacherParams.pageNo);
          }
        } catch (err) {
          this.$message({
            message: '删除失败',
            type: 'error',
          });
        }
      },
      // 保存
      async handleSave() {
        let data = [];
        try {
          if (this.modalType) {
            data = await axios.put('/admin/updateStudent', this.updateForm);
            await this.getStudentList(this.pageTotal);
          } else {
            data = await axios.post('/admin/insertStudent', this.updateForm);
            await this.getStudentList(this.params.pageNo);
          }
          if (data.data.status === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            });
          } else {
            this.$message({
              message: data.data.message,
              type: 'success',
            });
          }
        } catch (err) {
          this.$message({
            message: '操作失败',
            type: 'error',
          });
        }
        this.dialogVisible = false;
      },
      // 取消
      handleCancel() {
        this.handleClose();
      },
      // 筛选
      async getStudentList(pageNo) {
        if (pageNo) {
          this.params.pageNo = pageNo;
        }
        const params = this.clearEmptyParams(this.params);
        let data = await axios.get('/admin/showStudent', { params });
        this.tableData = data.data.list;
        this.pageTotal = data.data.pages;
        this.listTotal = data.data.total;
      },
      // 清楚空参数
      clearEmptyParams(obj) {
        const params = Object.assign({}, obj);
        for (const key in params) {
          if (!params[key] && key !== 'isEnable' && params[key] !== 0 && params[key] !== false) {
            delete params[key];
          }
        }
        return params;
      },
      // 获取班级列表
      async getClassList() {
        const data = await axios.get('/getClassList');
        this.classList = data.data;
      },
      handleSizeChange(pageSize) {
        this.params.pageSize = pageSize;
        this.getStudentList(1);
      },
      handleCurrentChange(pageNo) {
        this.getStudentList(pageNo);
      },
      handleTeacherSizeChange(pageSize) {
        this.teacherParams.pageSize = pageSize;
        this.getTeacherList(1);
      },
      handleTeacherCurrentChange(pageNo) {
        this.getTeacherList(pageNo);
      },
      addStudent() {
        this.updateForm = {};
        this.modalTitle = '新增学生信息';
        this.dialogVisible = true;
        this.modalType = false;
      },
      handleClose(done) {
        this.dialogVisible = false;
        this.updateForm = {};
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      handleClick() {

      },
      async getTeacherList(pageNo) {
        if (pageNo) {
          this.teacherParams.pageNo = pageNo;
        }
        const params = this.clearEmptyParams(this.teacherParams );
        let data = await axios.get('/admin/showTeacher', { params });
        this.teacherTableData = data.data.list;
        this.teacherPageTotal = data.data.pages;
        this.teacherListTotal = data.data.total;
      },
      addTeacher() {
        this.teacherUpdateForm = {};
        this.teacherModalTitle = '新增教师信息';
        this.teacherDialogVisible = true;
        this.teacherModalType = false;
      },
      handleTeacherClose() {
        this.teacherDialogVisible = false;
        this.teacherUpdateForm = {};
      },
      handleTeacherCancel() {
        this.teacherDialogVisible = false;
        this.teacherUpdateForm = {};
      },
      async handleTeacherSave() {
        this.teacherDialogVisible = false;
        let data = [];
        try {
          if (this.teacherModalType) {
            data = await axios.put('/admin/updateTeacher', this.teacherUpdateForm);
            await this.getTeacherList(this.teacherPageTotal);
          } else {
            console.log(1)
            data = await axios.post('/admin/insertTeacher', this.teacherUpdateForm);
            console.log(data)
            this.getTeacherList(this.teacherParams.pageNo);
            console.log(2)
          }
          if (data.data.status === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            });
          } else {
            this.$message({
              message: data.data.message,
              type: 'success',
            });
          }
        } catch (err) {
          this.$message({
            message: '操作失败',
            type: 'error',
          });
        }
        this.dialogVisible = false;
      },
      selectStudent(val) {
        this.selectStudentList = val.map(item => item.id)
        console.log('list', this.selectStudentList);
      },
      selectTeacher(val) {
        this.selectTeacherList = val.map(item => item.id)
      },
      async deleteTeacherList() {
        try {
          const data = await axios.post('/admin/deleteTeachers', {
            ids: this.selectTeacherList
          })
          this.$message({
            message: '操作成功',
            type: 'success',
          });
          await this.getTeacherList(this.teacherParams.pageNo);
        } catch (err) {
          this.$message({
            message: '操作失败',
            type: 'error',
          });
        }

      },
      async deleteStudentList() {
        try {
          const data = await axios.post('/admin/deleteStudents', {
            ids: this.selectStudentList
          })
          this.$message({
            message: '操作成功',
            type: 'success',
          });
          await this.getStudentList(this.params.pageNo)

        } catch (e) {
          this.$message({
            message: '操作失败',
            type: 'error',
          });
        }

      }
    },

    mounted() {
      this.getStudentList(1);
      this.getTeacherList(1)
      this.getClassList();

    },
  });
</script>
</body>
</html>
